<template>
  <div class="single" v-if="sList">
    <template v-for="item in sList">
      <div class="singleBox" :key="item.id">
        <div class="letf">
          <p class="songName">
            {{item.name}}
            <span v-if="item.alias.length>0">({{item.alias[0]}})</span>
          </p>
          <p class="singerName">
            {{item.artists[0].name}}
            <span>-</span>
            <span>{{item.album.name}}</span>
          </p>
          <p class="dy" v-if="item.alias.length>0">{{item.alias[0]}}</p>
        </div>
        <div class="rightIcon">
          <i class="iconfont icon-bofang" @click="goPlay(item.id)"></i>
          <!-- <i class="iconfont icon-dashujukeshihuaico- lb"></i> -->
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  components: {},
  props: ["singerName"],
  data() {
    return {
      sList: ""
    };
  },
  watch: {
    singerName: function() {
      this.$http("/search", {
        params: {
          keywords: this.singerName,
          type: 1,
          limit: 50
        }
      }).then(res => {
        console.log(res);
        this.sList = res.data.result.songs;
      });
    }
  },
  computed: {},
  methods: {
    // 点击播放
    goPlay(id) {
      this.$router.push({
        name: "musicPlayPage",
        params: {
          mid: id
        }
      });
    }
  },
  created() {
    console.log(this.singerName);
    this.$http("/search", {
      params: {
        keywords: this.singerName,
        type: 1,
        limit: 50
      }
    }).then(res => {
      console.log(res);
      this.sList = res.data.result.songs;
    });
  },
  mounted() {
    console.log(this.singleList);
  }
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/common.scss";
.single {
  padding: vw(10);
  .singleBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: vw(20);
    .letf {
      width: 90%;
      .songName {
        font-size: vw(16);
        // font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .singerName {
        font-size: vw(14);
        color: skyblue;
        padding-top: vw(2);
        span {
          color: #777;
        }
      }
      .dy {
        font-size: vw(14);
        color: #777;
      }
    }
    .rightIcon {
      color: #777;
      i {
        font-size: vw(30);
      }
      .lb {
        font-size: vw(33);
      }
    }
  }
}
</style>